<template>
  <div style="width:100%;height:calc( 100vh - 50px );">
    <place-map
      :site="site"
      :site-lng-lats="siteLngLats"
      :places-lng-lats="placesLngLats"
      :temp="temp"
      :dialog-form-visible="dialogFormVisible"
      @draw-over="drawOver"
      @cancel-dialog="cancelDialog"
      @add-place="addPlace"
    />
  </div>
</template>

<script>
import { getSingleBase, queryBaseLocations } from '@/api/base'
import { queryPlaceLocations, addPlace, addPlaceLocations } from '@/api/place'
import PlaceMap from './components/PlaceMap'
import store from '@/store'

export default {
  name: 'PlaceCreate',
  components: {
    PlaceMap
  },
  data() {
    return {
      siteId: null,
      placeIds: null,
      site: {},
      siteLngLats: [],
      placesLngLats: [],
      dialogFormVisible: false,
      temp: {
        placeName: '',
        square: undefined,
        siteId: undefined,
        vidoUrl: '',
        vidoName: '',
        crop: '默认',
        type: 'plant',
        account: store.getters.token,
        strokeColor: '#009966',
        fillColor: '#009966',
        strokeOpacity: 1,
        fillOpacity: 0.3,
        lngLats: undefined
      }
    }
  },
  created() {
    this.siteId = this.$route.query.siteId
    this.placeIds = this.$route.query.placeIds
    this.fetchData()
  },
  methods: {
    fetchData() {
      getSingleBase({ siteId: this.siteId })
        .then(response => {
          this.site = response.site
        })
        .catch(error => {
          console.log(error)
        })

      this.getSiteLngLats()
      if (this.placeIds !== 'NO_PLACE') {
        this.getPlacesLngLats()
      } else {
        // this.placesLngLats = 'NO_PLACE'
        this.$message({
          message: '当前基地暂未划分地块！',
          type: 'warning'
        })
      }
    },
    getSiteLngLats() {
      queryBaseLocations({ siteId: this.siteId })
        .then(response => {
          this.siteLngLats = this.formatLngLats(response.lngLats)
        })
        .catch(error => {
          console.log(error)
        })
    },
    getPlacesLngLats() {
      queryPlaceLocations({ placeIds: this.placeIds })
        .then(response => {
          this.placesLngLats = this.formatLngLats(response.lngLats)
        })
        .catch(error => {
          console.log(error)
        })
    },
    formatLngLats(lngLats) {
      if (lngLats.indexOf('#') === -1) {
        const tempArr = lngLats.split('@')
        return tempArr.map(item => {
          return item.split(',')
        })
      } else {
        const tempArr = lngLats.split('#')
        return tempArr.map(item => {
          return item.split('@').map(item => {
            return item.split(',')
          })
        })
      }
    },
    drawOver(event) {
      this.dialogFormVisible = true
      this.temp.siteId = this.siteId
      // 获取经纬度
      const lngLats = event.currentLnglats.map(item => {
        return `${item.getLng()},${item.getLat()}`
      })
      this.temp.lngLats = lngLats.join('@')

      this.temp.square = ((event.currentArea) / 1000000).toFixed(3)
      console.log(event.currentArea)
    },
    cancelDialog() {
      this.dialogFormVisible = false
    },
    addPlace() {
      addPlace(this.temp)
        .then(response => {
          this.dialogFormVisible = false
          const params = {
            lngLats: this.temp.lngLats,
            placeId: response.placeId
          }
          this.addPlaceLngLats(params)
          this.$router.push({
            path: '/place/item'
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    addPlaceLngLats(params) {
      addPlaceLocations(params)
        .then(response => {

        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>

</style>
